<template>
  <div class="root">
    <acme-app-bar title="Stepper"></acme-app-bar>
    <acme-cell-group>
      <acme-cell title="基础用法">
        <acme-stepper v-model="value1" slot="right-wrap" />
      </acme-cell>
      <acme-cell title="步长设置">
        <acme-stepper v-model="value2" slot="right-wrap" :step="5"/>
      </acme-cell>
      <acme-cell title="禁用状态">
        <acme-stepper v-model="value3" slot="right-wrap" disabled/>
      </acme-cell>
      <acme-cell title="自定义大小">
        <acme-stepper v-model="value4" slot="right-wrap" size="23px"/>
      </acme-cell>
      <acme-cell title="圆角风格">
        <acme-stepper v-model="value5" slot="right-wrap" round size="23px"/>
      </acme-cell>
    </acme-cell-group>
  </div>
</template>

<script>
  import AcmeCellGroup from "@/components/acme-design/cell-group";
  import AcmeCell from "@/components/acme-design/cell";
  import AcmeStepper from "@/components/acme-design/stepper";
  export default {
    components: {
      AcmeCellGroup,
      AcmeCell,
      AcmeStepper,
    },
    data() {
      return {
        value1: 1,
        value2: 1,
        value3: 1,
        value4: 1,
        value5: 1,
      };
    },
    methods: {
      
    },
  };
</script>

<style lang="scss" scoped>
  .root {
    min-height: 100vh;
    background: #f7f8fa;
    overflow: hidden;
  }
</style>